<!DOCTYPE html>
<html>

<head>
    <title>车辆信息·车队管理系统</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    {include file="common/header"/}
    <el-main>
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit" size="small" @click="clickAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="car" :row-class-name="tableRowClassName">
            <el-table-column prop="cid" label="ID">
            </el-table-column>
            <el-table-column prop="license" label="牌照">
            </el-table-column>
            <el-table-column prop="bought_time" label="购买时间" >
            </el-table-column>
            <el-table-column prop="type" label="车辆类型" >
            </el-table-column>
            <el-table-column prop="price" label="购买价格(万)">
            </el-table-column>
            <el-table-column prop="brand" label="品牌">
            </el-table-column>
            <el-table-column prop="status" label="使用状态">
            </el-table-column>
            <el-table-column prop="userid" label="使用人员id">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">

                    <el-link type="danger" @click="postDelete(scope.row)" :underline="false"><i
                            class="el-icon-delete"></i>删除</el-link>
                </template>
            </el-table-column>

        </el-table>
    </el-main>

    <!-- 添加框 -->
    <el-dialog title="添加车辆" :visible.sync="dialogFormAdd" :modal-append-to-body='false'>
        <el-form :model="formAdd" ref="formAdd">

            <el-form-item prop="license" label="车牌号">
                <el-input size="medium" autocomplete="off" v-model="formAdd.license"></el-input>
            </el-form-item>
            <el-form-item prop="brand" label="车辆品牌">
                <el-input size="medium" autocomplete="off" v-model="formAdd.brand"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="购买价格">
                <el-input size="medium" autocomplete="off" v-model="formAdd.price"></el-input>
            </el-form-item>
            <el-form-item prop="bought_time" label="购买日期">
                <el-date-picker v-model="formAdd.bought_time" align="right" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="type" label="车辆类型">
                <el-radio-group v-model="formAdd.type">
                    <el-radio label="small_passenger">小型客车</el-radio>
                    <el-radio label="mid_passenger">中型客车</el-radio>
                    <el-radio label="large_passenger">大型客车</el-radio>
                    <br>
                    <el-radio label="small_cargo">小型货车</el-radio>
                    <el-radio label="mid_cargo">中型货车</el-radio>
                    <el-radio label="large_cargo">大型货车</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="postAdd()">确认添加</el-button>
        </div>
    </el-dialog>
    {include file="common/footer"/}
    <script>
        new Vue({
            el: '#app',
            data:{
                car:{

                },
                username:"",
                formEdit:{

                },
                formAdd:{

                },
                dialogFormAdd:false,
                dialogFormEdit:false,
            },
            mounted () {
                // this.baiduMap();
                // this.username = getCookie('username');
                this.abcd();
                this.abc();
            },

            methods: {
                logOut() {
                    var that = this;
                    axios.post('user/logout')
                        .then(function (response)
                        {
                            if (response.data.code == 200) {
                                that.$message({
                                    message: '退出成功,正在跳转中',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error)
                        {
                            that.$message.error('tuichu失败，服务器内部错误');
                        })
                    ;

                },
                abc(){
                    var that = this;
                    axios.post('car/getallcar')
                        .then(function (response)
                        {
                            that.car = response.data.data;
                        })

                },
                abcd(){
                    var that = this;
                    axios.post('user/getmyvalue')
                        .then(function (response)
                        {
                            that.username = response.data.data.name;
                        })

                },
                clickAdd(){
                    var that = this;
                    that.formAdd = {};
                    that.dialogFormAdd = true;
                },
                postDelete(row){
                    var that = this;
                    this.$confirm('确认删除车辆？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{
                        axios.post('car/deletecar', Object.assign({}, PostBase, {
                            pk: row.cid
                        }))
                            .then(function (response) {
                                if (response.data.code == CODE_SUCCESS) {
                                    that.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        location.replace('');
                                    }, 1000)
                                } else {
                                    that.$message.error(response.data.msg);
                                }
                            })
                    })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                postAdd(){
                    var that = this;
                    axios.post('car/addcar', Object.assign({}, PostBase, that.formAdd))
                        .then(function (response) {
                            if (response.data.code == CODE_SUCCESS) {
                                that.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                that.dialogFormAdd = false;
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('服务器内部错误');
                            console.log(error);
                        });
                },
                tableRowClassName({row}) {
                    if (row.status === 'using') {
                        return 'warning-row';
                    }
                    return '';
                }
            }
        })
    </script>

</html>